<template>
  <div>
    <addressSearch v-on:returnAddress="receiveAddressInfoFromSearch"
                   v-on:setVisible="(value)=>this.showLocationMap=value"
                   :visible.sync="showLocationMap"
    />
    <el-row>
      <el-col :span="18">
        <el-input type="textarea" v-model="addressFatherText"/>
      </el-col>
      <el-col :span="6">
        <i class="el-icon-location-information" style="font-size: 25px"/>
      </el-col>
    </el-row>
    <el-button @click="setShowLocationMap(true)">显示</el-button>
    <el-button @click="setShowLocationMap(false)">隐藏</el-button>
    <el-dialog :visible.sync="showLocationMap" width="500px" append-to-body></el-dialog>
    <div class="center"></div>
  </div>
</template>

<script>
import addressSearch from '@/views/components/addressSearch/index'

export default {
  name: 'index',
  components: { addressSearch },
  created() {

    AMap.plugin('AMap.DistrictSearch', () => {
      let districtSearch = new AMap.DistrictSearch({
        level: 'district',
        subdistrict: 2
      })

      districtSearch.search('余杭', (status, result) => {
        console.log(status)
        console.log(result)
      })
    })

  },
  data() {
    return {
      addressFatherText: undefined,
      showLocationMap: false
    }
  },
  methods: {
    receiveAddressInfoFromSearch(data) {
      // console.log(data)
    },
    setShowLocationMap(value) {
      console.log(`${this.showLocationMap}  ${value}`)
      this.showLocationMap = value
    }
  }
}
</script>

<style scoped>
.center {
  height: calc(80vh);
  width: calc(50vw);
  /* height: 80%;
  width: 50%; */
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  background-color: green;
  border-radius: 3px;
}
</style>
